<template>
	<div>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
	       <div class="banner">
	       		<div class="setImageContainer" @click="$router.push({path: '/sets'})"></div>
	       		<div class="imgs" @click="goPersonHome()">
		       		<div class="face">
		       			<img :src = "headImageUrl" alt = "">
		       		</div>
	       		</div>
	       		<div @click="goPersonHome()" class='center txt btn' v-if="!person.name">登录/注册</div>
	       		<div class="name" style="" v-if="person.name" @click="goPersonHome()">{{person.name}}</div>
	       </div>
	       <div class="contWrap">
	            <div class="bf">
	                <span class="m_rental">我的租赁</span>
	                <div class="fr" @click="goOrdersLs('all')">
	                    <span  class="query-c">查看全部</span>
	                    <div class="img-query"></div>
	                </div>
	                <div class="line"></div>
	            </div>
	        </div>
	        <div class="contWrap c6">
	            <div class="transverse-box">
	                <div class="mbox" @click="goOrdersLs('appointed')">
	                    <div class="img-rental"></div>
	                    <div>预约租赁</div>
	                </div>
	                <div class="mbox" @click="goOrdersLs('leasing')">
	                    <div class="img-rentaling"></div>
	                    <div>租赁中</div>
	                </div>
	                <div class="mbox" @click="goOrdersLs('due')">
	                    <div class="img-back"></div>
	                    <div>到期退还</div>
	                </div>
	                <div class="mbox" @click="goOrdersLs('finished')">
	                    <div class="img-done"></div>
	                    <div >已完成</div>
	                </div>
	                <div class="mbox" style="position: relative" @click="goJudge()">
	                    <div style="position: absolute;top: 10%;right:24%;height: 0.426667rem;width: 0.426667rem;text-align: center;line-height: 0.426667rem;border-radius: 0.213333rem;color: #fff;background: #FA6F6A;font-size: 0.266667rem" ng-if="pending_Evaluation_Num>0">
	                        {{pending_Evaluation_Num}}
	                    </div>
	                    <div class="img-judge"></div>
	                    <div>待评价</div>
	                </div>
	            </div>
	        </div>
	        <div class="contWrap mt">
	            <div class="bf">
	                <span class="m_rental">我的服务</span>
	                <div class="line"></div>
	            </div>
	        </div>
	        <div class="contWrap c3">
                <div style="overflow: auto;background: #fff;">
                    <div class="service-box" @click.stop.prevent="tel()">
                        <div class="cservice "></div>
                        <div class="name-area">客服</div>
                    </div>
                    <div class="service-box" @click.stop.prevent="goCustomerService()">
                        <div class="gservice"></div>
                        <div class="name-area">售后</div>
                    </div>
                    <div class="service-box" on-tap="">
                        <div class="grental"></div>
                        <div class="name-area">续租</div>
                    </div>
                    <div class="service-box" on-tap="goBuyFinish()">
                        <div class="frental"></div>
                        <div class="name-area">买断</div>
                    </div>
                </div>
            </div>
	        <div class="contWrap mt">
	            <div class="bf">
	                <span class="m_rental">其他</span>
	                <div class="line"></div>
	            </div>
	        </div>
	        <div class="contWrap c3">
	            <div style="overflow: auto;background: #fff;">
	                <div class="service-box" @click="goMyVoucher()">
	                    <div class="img-area vocher"></div>
	                    <!--  <div class="note-area" ng-if="size">{{size}}张可用</div> -->
	                    <div class="name-area">优惠券</div>
	                </div>
	                <div class="service-box" @click="goShareVoucher()">
	                    <div class="img-area invitation"></div>
	                    <div class="name-area">邀请好友</div>
	                </div>
	                <div class="service-box" @click="goCollection()">
	                    <div class="img-area favourite"></div>
	                    <div class="name-area">收藏夹</div>
	                </div>
	                <div class="service-box" @click="goAddress()">
	                    <div class="img-address"></div>
	                    <div class="name-area">收货地址</div>
	                </div>
	                <div class="service-box" @click="goHelp();">
	                    <div class="img-areap"></div>
	                    <div class="name-area">常见问题</div>
	                </div>
	            </div>
	        </div>
	      </scroll>
    </div>
</template>
<style lang="less" scoped>
	.banner {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	    height: 157px;
	    background: url('../../assets/img/pers/bg.png') no-repeat;
	    background-size: 100%;
	    color: #fff;
	    text-align: center;
	    margin-bottom: 12px;
	    & .setImageContainer {
	    	    position: absolute;
			    height: 20px;
			    width: 18px;
			    top: 32px;
			    left: 18px;
			    background: url('../../assets/img/pers/mine_set.png') no-repeat;
			    background-size: 100%;
			    z-index: 20;
	    }
	    & .imgs {
	    	position: relative;
    		height: 105px;
		    & .face {
			    position: absolute;
			    top: 36px;
			    width: 70px;
			    height: 70px;
			    left: 50%;
			    -webkit-transform: translateX(-50%);
			    transform: translateX(-50%);
			    border-radius: 50%;
			    overflow: hidden;
			    >img {
			    	height: 100%;
			    	width: 100%;
			    }
			}
		}
		& .name {
			margin-top: 8px;
    		font-size: 12px;
		}
	}
	.contWrap {
		&>.bf {
			background: #fff;
			& .fr {
			    float: right;
			    margin: 14px;
			    line-height: 12px;
			}
		}
		&.mt {
		    margin-top: 12px;
		}
		&.c3 {
		    color: #333;
		}
		& .m_rental {
		    display: inline-block;
		    margin: 14px;
		    font-size: 14px;
		    line-height: 12px;
		}
		& .query-c {
		    display: inline-block;
		    font-size: .37333rem;
		    color: #999;
		}
		& .img-query {
		    display: inline-block;
		    width: .16rem;
		    height: .2933rem;
		    background-image: url("../../assets/img/pers/arrow_right_gray@3x.png");
    		background-size: cover;
		}
		& .line {
		    border-bottom: 0.5px solid #eee;
		    margin: 0 16px;
		}
		&.c6 {
		    color: #666;
		}
		&>.transverse-box {
		    display: -webkit-box;
		    display: flex;
		    -webkit-box-pack: center;
		    justify-content: center;
		    -webkit-box-align: center;
		    align-items: center;
		    width: 100%;
		    >.mbox {
			    background: #fff;
			    display: -webkit-box;
			    display: flex;
			    -webkit-box-orient: vertical;
			    -webkit-box-direction: normal;
			    flex-direction: column;
			    -webkit-box-pack: center;
			    justify-content: center;
			    -webkit-box-align: center;
			    align-items: center;
			    -webkit-box-flex: 1;
			    flex-grow: 1;
			    height: 2rem;
			    & :nth-last-child(1) {
				    margin-top: 8px;
				}
			}
		}
		& .service-box {
		    background: #fff;
		    display: -webkit-box;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    flex-direction: column;
		    -webkit-box-pack: center;
		    justify-content: center;
		    -webkit-box-align: center;
		    align-items: center;
		    float: left;
		    width: 25%;
		    height: 75px;
		    >.name-area {
			    margin-top: 8px;
			    font-size: 14px;
			}
			& .cservice {
			    width: 25px;
			    height: 25px;
			    background: url('../../assets/img/pers/rental/mine_service@3x.png') no-repeat;
			    background-size: contain;
			}
			& .gservice {
			    width: 25px;
			    height: 25px;
			    background: url('../../assets/img/pers/rental/mine_return@3x.png') no-repeat;
			    background-size: 100%;
			}
			& .grental {
			    width: 25px;
			    height: 25px;
			    background: url('../../assets/img/pers/rental/mine_lease@3x.png') no-repeat;
			    background-size: 100%;
			}
			& .frental {
			    width: 25px;
			    height: 25px;
			    background: url('../../assets/img/pers/rental/mine_purchasing@3x.png') no-repeat;
			    background-size: 100%;
			}
		}
	}
	.img-rentaling, .img-rental, .img-back, .img-done, .img-judge {
	    width: 25px;
	    height: 25px;
	    background-size: cover;
	}
	.img-rental {
	    background-image: url("../../assets/img/pers/rental/mine_reservation@3x.png");
	}
	.img-rentaling {
	    background-image: url("../../assets/img/pers/rental/mine_rent@3x.png");
	}
	.img-back {
	    background-image: url("../../assets/img/pers/rental/mine_back@3x.png");
	}
	.img-done {
	    background-image: url("../../assets/img/pers/rental/mine_done@2x.png");
	}
	.img-judge {
	    background-image: url("../../assets/img/pers/rental/mine_comment@3x.png");
	}
	& .img-area {
	    width: 24px;
	    height: 27px;
	    background-size: 100%;
	    background-image: url('../../assets/img/pers/pers_icons.png');
	}
	& .vocher {
	    background-position: 0 -28.125px;
	}
	& .invitation {
	    background-position: 0 -55.125px;
	}
	& .favourite {
	    background-position: 0 -84px;
	}
	& .support {
	    background-position: 0 -171px;
	}
	& .img-address {
	    background-image: url('../../assets/img/pers/mine_adress@2x.png');
	    width: 25px;
	    height: 25px;
	    background-size: cover;
	}
	.img-areap {
	    width: 25px;
	    height: 25px;
	    background-size: 100%;
	    background-image: url('../../assets/img/pers/mine_aboutus@3x.png');
	}
</style>
<script>
	import apiService from "@/api/homepage.js";
	export default {
        data (){
            return {
                person: {},
                headImageUrl: require('../../assets/img/pers/face.png'),
                pending_Evaluation_Num: 0
            }
        },
        methods: {
        	goMyVoucher(){
        		this.$router.push({path: '/myAwards'})
        	},
            goPersonHome() {
            	this.$router.push({path: '/personHome'})
            },
            goShareVoucher() {
            	this.$router.push({path: '/shareAward'})
            },
            goCollection(){
            	this.$router.push({path: '/collection'})
            },
            tel() {
            	this.$router.push({path: '/Cservice'})
            },
            goAddress() {
            	this.$router.push({path: '/manageAddress'})
            },
            goHelp() {
            	this.$router.push({path: '/help'});
            },
            goOrdersLs(type){
            	localStorage.setItem("type", type);
            	this.$router.push({path: '/orders'})
            },
            goJudge(){
            	this.$router.push({path: '/judge'});
            },
            getPendingEvaluation(){
            	let _this = this;
            	apiService.getMyJudge('not_comment').then(resp=>{
            		if(resp.code == 200) {
            			_this.pending_Evaluation_Num = resp.data.length;
            		}
            	})
            },
            goCustomerService(){
            	this.$router.push({name: 'customerService'})
            },
            pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },
        mounted(){
             let _this = this;
             apiService.getUserInfo().then(resp=>{
             	if(resp.code == 200) {
	             	_this.person = resp.data
	             	if(_this.person.headImageUrl) {
	             		_this.headImageUrl = 'https://img.mibaostore.cn/' + _this.person.headImageUrl
	             	}
	             }
             })
            //获取未评价数
            if(localStorage.getItem('token')) {
            	this.getPendingEvaluation();
            }
        }
    }
</script>